<template>
  <router-view class="routet-view"></router-view>
  <!-- 富文本弹框 -->
  <Dialog
    :show-top="title ? true : false"
    :title="title"
    width="50vw"
    top="12vh"
    v-model:visible="editorVisible"
  >
    <div class="dialog-html" v-html="content"> </div>
  </Dialog>
  <!--  -->

  <!-- 图片弹框 -->
  <Dialog
    :show-top="title ? true : false"
    :title="title"
    v-model:visible="imgVisible"
  >
    <div class="dialog-images">
       <img v-lazy="publicUrl(content)">
    </div>
  </Dialog>
  <!--  -->
</template>
<script setup lang="ts" name="">
import mitt from "@/utils/mittBus";
import Dialog from "@/components/Dialog/index.vue";
import { ref } from "vue";
import { AppDialog } from "@/interface";
import { publicUrl } from "./utils/util";
const title = ref<string>("");
const editorVisible = ref<boolean>(false);
const imgVisible = ref<boolean>(false);
const content = ref<string>("");
mitt.on("showDialog", (result) => {
  let results = result as AppDialog;
  if (results.type === "editor") {
    editorVisible.value = true;
  } else if (results.type === "img") {
    imgVisible.value = true;
  }
  title.value = results.title ?  results.title : '';
  content.value = results.content;
});
</script>
<style scoped lang="scss">
.routet-view {
  font-size: 0.1rem;
  color: #2d2d2d;
}
.dialog-html{
    font-size: .1rem;
    height: 70vh;
    word-break: break-all;
    overflow-y: auto;
}
.dialog-images{
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    img{
      width: 100%;
      height: 100%;
    }
}
</style>
